<template>
  <div class="srbd">
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">每日一占</p>
        </h3>
        <div>
          <div style="text-align: center">
            <p style="padding: 20px">
              占卜方法：牌已洗好，请保持虔诚，抽取一张牌，并查看内容，自行体会其中的吉凶指示。
            </p>
            <div
              style="display: flex; gap: 10px; justify-content: center"
              @click="submitForm"
            >
              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />

              <img
                src="@/assets/image/back.jpg"
                style="width: 70px; height: 128px"
                alt=""
              />
            </div>

            <p style="padding: 20px">
              什么是塔罗牌：塔罗牌，由“TAROT”一词音译而来，被称为“大自然的奥秘库”。它是西方古老的占卜工具，中世纪起流行于欧洲，其起源一直是个谜。
            </p>
          </div>
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p style="">
            1.塔罗牌的大阿卡那牌一共22张，就如同它的名字一样，是用来解释命运的大致运势。每一张牌都反映着人生的不同际遇，因此占卜时大阿卡那牌会成为分析的重点。它给我们的答案或讯息是关于比较大的问题或主要情况。
          </p>
          <p>
            2.塔罗牌的一张牌占卜法很简单，就是任选一张牌来做解释，这个占卜适合用于任何占卜。
          </p>

          <p>2.心诚则灵，测算结果仅供参考。</p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <div class="bazi_info" v-if="result != null">
        <div class="base_info">
          <div class="show">
            <span class="l">您翻出塔罗第 {{ result.id }}牌 </span>
            <span class="r">{{ result.number }}</span>
          </div>
          <div class="show">
            <span class="l">牌名:</span>
            <span class="r">{{ result["牌名"] }}</span>
          </div>
          <div class="show">
            <span class="l">关键字:</span>
            <span class="r">{{ result["关键字"] }}</span>
          </div>
          <div class="show">
            <span class="l">正逆:</span>
            <span class="r">{{ result["正逆"] }}</span>
          </div>
          <div class="show">
            <span class="l">星相:</span>
            <span class="r">{{ result["星相"] }}</span>
          </div>
          <div class="show">
            <span class="l">四要素:</span>
            <span class="r">{{ result["四要素"] }}</span>
          </div>
          <div class="show">
            <span class="l">牌面描述:</span>
            <span class="r">{{ result["牌面描述"] }}</span>
          </div>
        </div>

        <div class="base_info">
          <div class="details">
            <div class="names">
              <span>基本含义:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["基本含义"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>恋爱婚姻:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["恋爱婚姻"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>工作学业:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["工作学业"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>基本含义:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["基本含义"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>人际财富:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["人际财富"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>健康生活:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["健康生活"] }}</span>
            </div>
          </div>

          <div class="details">
            <div class="names">
              <span>其它:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["其它"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>建议:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["建议"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>恋爱婚姻建议:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["恋爱婚姻建议"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>工作学业建议:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["工作学业建议"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>人际财富建议:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["人际财富建议"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>健康生活建议:</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["含义"]["健康生活建议"] }}</span>
            </div>
          </div>
        </div>
        <div class="yl">
          <span>仅供娱乐！请勿当真</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      birthday: "",

      result: null,
      area: "",
      form: {
        shuzi: "",
      },
    };
  },
  mounted() {},
  methods: {
    submitForm() {
      this.form["api_key"] = "FNcQHQuf0W8wDrXMjWc0xqTzw";
      let config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      this.$axios
        .post(
          window.config.apiUrl + "/v1/Zhanbu/taluozhanbu",
          this.form,
          config
        )
        .then((res) => {
          if (res.data.errcode == -1) {
            this.$message({
              type: "warning",
              message: res.data.errmsg,
            });

            return;
          }

          this.centerDialogVisible = true;
          this.result = res.data.data;
          console.log(this.result);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.bd {
  border: 1px solid #e5e5e5;
}

.cesaun_container {
}

::v-deep .el-card.is-always-shadow {
  box-shadow: none !important;
}

::v-deep .el-card__header {
  padding: 10px 20px !important;
}

.form-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 2px;
}

.form-title {
  margin: 0;
  color: #303133;
  font-size: 16px;
  text-align: left;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-radio {
  margin-right: 30px;
}

::v-deep .distpicker-address-wrapper {
  width: 100% !important;
}

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  text-align: center;
}

.dialog_cesuan {
  .bazi_info {
    height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background-color: #fff;

    .base_info {
      margin: 20px;

      .title {
        display: flex;
        padding: 5px;

        .shu {
          width: 5px;
          height: 20px;
          background-color: #e6a84b;
          border-radius: 10px;
        }

        .ti {
          padding-left: 8px;
          font-weight: 800;
          font-size: 15px;
        }
      }

      .show {
        margin-top: 15px;

        .l_ {
          font-size: 14px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }

        .l {
          font-size: 15px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }
      }

      .details {
        border: 1px solid #e5e5e5;
        border-bottom: none;
        margin-top: 20px;

        .names {
          text-align: center;
          color: #e6a84b;
          border-bottom: 1px solid #e5e5e5;
          color: #e6a84b;
          font-weight: 800;
          background-color: #fff3ef;
          height: 50px;
          line-height: 50px;
        }

        .des {
          border-bottom: 1px solid #e5e5e5;
          padding-left: 10px;
          display: flex;
          align-items: center;

          .des_text {
            color: #e6a84b;
            width: 14%;
            font-weight: 800;
            user-select: text;
          }

          .des_deta {
            width: 85%;
            line-height: 26px;
            text-indent: 2em;
            user-select: text;
          }
        }
      }
    }
  }
}
</style>